<template>
  <CDialog
    :visible="visible"
    :title="title"
    type="add"
    width="630px"
    @submit="handleSubmit"
    @cancel="handleCancel"
  >
    <i-form
      ref="form"
      :items="formitems"
      :model="form"
      :rules="rules"
      label-width="140px"
    >
    </i-form>
  </CDialog>
</template>
<script>
import CDialog from '@/components/CDialog'
import { addServerInfo, updateServerInfo } from '@/api/paramsSetting'
import { cloneDeep } from 'lodash'
export default {
  name: 'ServiceUpdateDlg',
  components: { CDialog },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      required: true,
    },
    items: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      form: {},
      rules: {
        serverIp: [
          {
            required: true,
            message: '请输入端口号',
          },
          {
            validator: (rules, value, callback) => {
              let patt = /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))$/
              if (!patt.test(value)) {
                callback(new Error('请输入正确ip地址'))
              } else {
                callback()
              }
            },
          },
        ],
        serverPort: [
          {
            required: true,
            message: '请输入端口号',
          },
          {
            validator: (rules, value, callback) => {
              let testValue = parseInt(value, 10)
              if (isNaN(testValue) || testValue < 0 || testValue > 65535) {
                callback(new Error('请输入正确端口号0 - 65535'))
              } else {
                callback()
              }
            },
          },
        ],
        onenetProductId: [
          {
            validator: (rules, value, callback) => {
              // if (value === '') callback()
              let testValue = parseInt(value, 10)
              if (testValue && isNaN(testValue)) {
                callback(new Error('onenet产品ID只能是数字'))
              } else {
                callback()
              }
            },
          },
        ],
        onenetRegistryCode: [
          {
            validator: (rules, value, callback) => {
              if (!/^[a-zA-Z\d]{0,}$/.test(value)) {
                callback(new Error('onenet注册码只能输入数字和字母'))
              } else {
                callback()
              }
            },
          },
        ],
      },
      formitems: [
        {
          label: '服务器名称',
          value: 'serverName',
          type: 'text',
          clearable: true,
          required: true,
          maxlength: 20,
          'show-word-limit': true,
        },
        {
          label: '服务器IP',
          value: 'serverIp',
          type: 'text',
          clearable: true,
        },
        {
          label: '服务器端口号',
          value: 'serverPort',
          type: 'text',
          clearable: true,
        },
        {
          label: 'Onenet产品ID',
          value: 'onenetProductId',
          type: 'text',
          placeholder: '非必填',
          clearable: true,
        },
        {
          label: 'Onenet注册码',
          value: 'onenetRegistryCode',
          type: 'text',
          placeholder: '非必填',
          clearable: true,
        },
      ],
    }
  },
  mounted() {
    if (this.type === 'edit') {
      this.form = cloneDeep(this.items)
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        if (this.type === 'add') {
          this.handleAdd()
        } else {
          this.handleUpdate()
        }
      })
    },
    handleAdd() {
      this.loading = true
      addServerInfo(this.form)
        .then(() => {
          this.$message({
            showClose: true,
            message: '新增成功',
            type: 'success',
          })

          this.$emit('update:visible', false)
          this.refresh()
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleUpdate() {
      this.loading = true
      updateServerInfo(this.form)
        .then(() => {
          this.$message({
            showClose: true,
            message: '编辑成功',
            type: 'success',
          })

          this.$emit('update:visible', false)
          this.refresh()
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    refresh() {
      this.$emit('refresh')
    },
    handleCancel() {
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" scoped></style>
